<template>
	<div class="login-wrap">
		<div class="login-title">
			九龙坡区学生体质健康后台管理
		</div>
		<div class="login-box">
			<div class="ms-login">
				<div class="ms-title">用户登录</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
					<el-form-item v-if="isDev" prop="loginType">
						<el-select v-model="loginType">
							<el-option label="个人服务器(开发)" value='/api_pre'></el-option>
							<el-option label="185服务器" value='/api_185'></el-option>
							<el-option label="126服务器" value='/api_126'></el-option>
							<el-option label="187服务器" value='/api_187'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="username">
						<el-input v-model="ruleForm.username" placeholder="请输入账号" size="48px" id="account"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
					</el-form-item>
					<div class="login-btn">
						<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
					</div>
				</el-form>
			</div>
			<p>技术支持：浙江万航信息科技有限公司</p>
		</div>
	</div>
</template>

<script>
	import { mapActions } from "vuex";
	import Vue from 'vue';
	import store from '../../../vuex/index';

	export default {
		data() {
			let checkUsername = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入用户名"));
				} else {
					callback();
				}
			};
			let validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					if (value.length < 3 || value.length > 20) {
						callback(new Error("密码格式错误"));
					} else {
						callback();
					}
				}
			};
			return {
				ruleForm: {
					username: "",
					password: ""
				},
				rules: {
					username: [
						{ required: true, message: "请输入用户名", trigger: "blur" },
						{ validator: checkUsername }
					],
					password: [
						{ required: true, message: "请输入密码", trigger: "blur" },
						{ validator: validatePass }
					]
				},
				loginType: localStorage.getItem("domain") || this.$util.domain,
				isDev: this.$util.domain.indexOf('/api_') > -1 ? true : false
			};
		},
		methods: {
			...mapActions(["SIGNIN"]),

			submitForm(formName) {
				if (this.isDev) {
					localStorage.setItem("domain", this.loginType);
					this.$util.domain = localStorage.getItem("domain");
					this.$axios.defaults.baseURL = this.$util.domain;
				}
				let permission = new Map([
					[0, "/school"],
					[1, "/statistics"],
					[2, "/physicalScore"],
					[3, "/physicalScore"]
				])

				this.$refs[formName].validate(valid => {
					if (valid) {
						let Authorization = "Basic " + this.$util.toBase64(this.ruleForm.username + ":" + this.ruleForm.password);

						this.$axios.post('/adminapi/v1/login/login?phone=' + this.ruleForm.username + "&password=" + this.ruleForm.password, {}, {
							headers: { Authorization: Authorization }
						}).then(response => {
							if (response.data.error == 10000) {
								let userInfo = response.data.data;
								let user = {
									userId: userInfo.userId,
									userName: userInfo.userName,
									jobTitle: userInfo.jobTitle,
									schoolName: userInfo.schoolName,
									schoolId: userInfo.schoolId,
									areaId: userInfo.areaId,
									cityName: userInfo.cityName,
									zoneName: userInfo.zoneName,
									userType: userInfo.userType,
									phone: userInfo.phone
								}

								if (user.userType == 1) {
									user.cityName = userInfo.areaModelList ? userInfo.areaModelList[0].areaName : "";
									user.zoneName = userInfo.areaModelList ? userInfo.areaModelList[1].areaName : "";
								}
								this.SIGNIN(user);
								this.$router.push(permission.get(user.userType));
							} else {
								this.$util.errorMsg(response.data.message);
							}
						}).catch(response => {
							this.$util.errorMsg("登录失败");
						})
					}

				});
			}
		}
	};  
</script>

<style>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background: url("../../assets/login_bg.jpg");
		background-size: 100% 100%;
	}

	.login-title {
		position: absolute;
		top: 60px;
		left: 120px;
		font-family: 'FZZDHJW--GB1-0';
		font-size: 48px;
		color: #FFFFFF;
		letter-spacing: 3px;
	}

	.login-box {
		position: absolute;
		right: 200px;
		top: 60%;
		transform: translateY(-55%);
		text-align: center;
	}

	.login-box>p {
		padding-top: 20px;
		font-family: 'PingFangSC-Regular';
		font-size: 16px;
		color: #FFFFFF;
	}

	.login-wrap .ms-title {
		text-align: center;
		font-family: 'PingFangSC-Regular';
		font-size: 32px;
		color: #0398FF;
		margin-bottom: 50px;
	}

	.login-wrap .ms-login {
		width: 360px;
		padding: 20px;
		background-color: #fff;
		border-radius: 5px;
		display: inline-block;
		position: relative;
	}

	.login-wrap .login-btn {
		padding-top: 30px;
		padding-bottom: 10px;
		text-align: center;
	}

	.login-wrap .el-input,
	.login-wrap .el-select {
		width: 100%;
	}

	.login-wrap .ms-login .el-input__inner {
		height: 48px;
		line-height: 48px;
		font-size: 14px;
		border-radius: 8px !important;
		border-color: #0398FF;
	}

	.login-wrap .login-btn button,
	.login-wrap .login-btn button:hover {
		width: 100%;
		height: 48px;
		border-radius: 24px;
		font-size: 24px;
		font-family: 'PingFangSC-Medium';
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.11);
	}
</style>